<template>
	<div class="fix-goods-list is-bg" :style="baseStyle">
		<template v-if="list.length">
			<div class="inner" :class="[`is-${data.mode}`]">
				<div
					class="grid-item"
					v-for="(item, index) in list"
					:key="index"
					:class="[data.isShadow ? 'is-shadow' : '']"
				>
					<el-image class="icon" :src="item.mainPic" fit="cover" />
					<div class="content">
						<div class="title">{{ item.title }}</div>
						<div class="price-sold">
							<span class="price">￥{{ item.price }}</span>
							<span class="sold">已售 {{ item.sold }}</span>
						</div>
					</div>
				</div>
			</div>
		</template>
		<template v-else>
			<div class="empty">
				<span>商品组</span>
			</div>
		</template>
	</div>
</template>

<script lang="ts" name="fix-goods-list" setup>
import { ref, watch, computed, type PropType } from 'vue';
import { Form } from '../../types/form';
import { useCool } from '/@/cool';
const { service } = useCool();
const props = defineProps({
	data: {
		type: Object as PropType<Form.Goods>,
		default: () => {
			({
				mode: 'mode-1',
				source: 'source-1',
				attribute: 0,
				num: 99,
				gap: 0,
				isShadow: false,
				type: [],
				list: []
			});
		}
	},
	styleSpacing: {
		type: Object as PropType<Form.Spacing>,
		default: () => {
			return {
				marginTop: 0,
				marginBottom: 0,
				marginLR: 0,
				padding: 0,
				borderTopLR: 0,
				borderBottomLR: 0
			};
		}
	},
	styleColor: {
		type: Object as PropType<Form.Color>,
		default: () => {
			return {
				color: '#000',
				backgroundColor: '#f5f6f7',
				opacity: 1
			};
		}
	}
});
const baseStyle = computed(() => {
	return {
		margin: `${props.styleSpacing.marginTop / 2}px ${props.styleSpacing.marginLR / 2}px ${props.styleSpacing.marginBottom / 2}px ${props.styleSpacing.marginLR / 2}px`,
		color: props.styleColor.color,
		padding: `${props.styleSpacing.padding / 2}px`,
		'--opacity': props.styleColor.opacity,
		'--background': props.styleColor.backgroundColor,
		borderRadius: `${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderTopLR / 2}px ${props.styleSpacing.borderBottomLR / 2}px  ${props.styleSpacing.borderBottomLR / 2}px`
	};
});
const list = ref<Array<Eps.GoodsInfoEntity>>([]);
// 创建计算属性来返回我们关心的特定属性
const watchedData = computed(() => ({
	source: props.data.source,
	attribute: props.data.attribute,
	num: props.data.num,
	ids: props.data.list.map(e => e.id),
	typeIds: props.data.type.map(e => e.id)
}));
watch(
	() => watchedData.value,
	async newValue => {
		let goods = [];
		try {
			goods = await service.goods.info.getGoodsFromFixture({
				source: newValue.source,
				attribute: newValue.attribute,
				num: newValue.num,
				ids: newValue.ids,
				typeIds: newValue.typeIds
			});
		} catch (error) {
			console.log(error);
		}
		list.value = goods;
	},
	{
		deep: true,
		immediate: true
	}
);
</script>

<style lang="scss" scoped>
.fix-goods-list {
	box-sizing: border-box;
	overflow: hidden;
	.empty {
		height: 150px;
		display: flex;
		justify-content: center;
		align-items: center;
		span {
			font-size: 26px;
			color: var(--el-text-color-placeholder);
		}
	}
	.inner {
		padding-bottom: 12px;
		box-sizing: border-box;
		.grid-item {
			background-color: #fff;
			border-radius: 6px;
			box-sizing: border-box;
			overflow: hidden;
		}
		.is-shadow {
			box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, 0.3);
		}
		.icon {
			width: 100%;
			max-width: 100%;
			vertical-align: middle;
		}
		.content {
			max-width: 100%;
			padding: 6px;
			box-sizing: border-box;
			overflow: hidden;
			.voucher {
				font-size: 14px;
				margin-top: 6px;
				.tips {
					color: #e6a23c;
					font-size: 12px;
				}
				.di {
					margin-left: 10px;
					color: #e6a23c;
				}
			}
			.title {
				box-sizing: border-box;
				white-space: nowrap; /* 禁止换行 */
				overflow: hidden; /* 隐藏溢出的内容 */
				text-overflow: ellipsis; /* 超出部分显示省略号 */
				max-width: 100%; /* 确保元素最大宽度不超过容器 */
				font-size: 14px;
			}
			.price-sold {
				margin-top: 6px;
				font-size: 14px;
				display: flex;
				justify-content: space-between;
				.price {
					color: red;
				}
				.sold {
					color: #a9a9a9;
					font-size: 12px;
				}
			}
		}
	}
	.is-mode-1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.is-mode-2 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 10px;
	}
	.is-mode-3 {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		.grid-item {
			background-color: #fff;
			border-top-right-radius: 6px;
			border-top-left-radius: 6px;
			border-bottom-right-radius: 6px;
			border-bottom-left-radius: 6px;
			overflow: hidden;
			display: grid;
			grid-template-columns: 100px 1fr;
			gap: 20px;
		}
	}
	.is-mode-4 {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		.grid-item {
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-top-right-radius: 6px;
			border-top-left-radius: 6px;
			border-bottom-right-radius: 6px;
			border-bottom-left-radius: 6px;
			overflow: hidden;
		}
	}
}
.is-bg {
	position: relative;
	z-index: 1; /* 确保 .is-bg 及其子元素位于 ::after 伪元素的上层 */
}
.is-bg::after {
	content: '';
	background-color: var(--background);
	opacity: var(--opacity);
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	pointer-events: none;
}
</style>
